<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c1{
            border:3px solid yellow;
        }
        .c2{
            border-radius: 100px;
        }
        .c3{
            color:white;
            text-align: center;;
            line-height:200px ;
        }
        .bg{
            background-color: green !important;
        }
    </style>
</head>
<body>
    <div id="box" onclick="change()">测试</div>
   111111111111111
   <script>
    var body = document.getElementsByTagName("body")[0];
    body.style.backgroundColor = "red";
    body.style.fontSize = "25px";
    body.style.color = "white";


    var box = document.getElementById("box");
    box.style.width = "200px";
    box.style.height = "200px";
    box.style.fontSize.backgroundColor = "blue";

    box.className = "c1 c2 c3";
    console.log(box.classList);
    function change(){
        box.classList.toggle("bg");
    }
   </script> 
</body>
</html>